<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>地图</title>
	<link rel="stylesheet" type="text/css" href="../css/map.css"/>
	<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="../assets/swiper/css/swiper.min.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="_left">
				<dl >
					<dt><img src="../images/map_fujin.jpg"/></dt>
					<dd>附近</dd>
		        </dl>
			</div>
			<div class="_center">
				<dl >
		        	<dd>海淀区</dd>
	            	<dt><img src="../images/map_diqu.jpg"></dt>
		        </dl>
			</div>
	        <div class="_right">
	        	<dl >
		        	<dt><img src="../images/map_sousuo.jpg"></dt>
	            	<dd></dd>
		        </dl>
	        </div>
		</header>
		
		<!-- swiper切换导航 -->
		<div class="content">
			<section class="container">
				<div class="swiper-container-list nav-list">
					<div class="swiper-wrapper">
						<div class="swiper-slide active-nav">全部</div>
						<div class="swiper-slide">景区公园</div>
						<div class="swiper-slide">博物馆</div>
						<div class="swiper-slide">游乐场</div>
						<div class="swiper-slide"><img src="../images/map_leixing.jpg"/></div>			
					</div>
				</div>
				<section class="swiper-container-opts">
					<figrue class="swiper-wrapper">
						<figure class="swiper-slide">
							<div class="map_1">
								<table class="fenlei">
									<tr>
										<td>
											<dl>
												<dt><img src="../images/map_fenlei_01.jpg"/></dt>
												<dd>景区公园</dd>
											</dl>
										</td>
										<td>
											<dl>
												<dt><img src="../images/map_fenlei_01.jpg"/></dt>
												<dd>博物馆</dd>
											</dl>
										</td>
										<td>
											<dl>
												<dt><img src="../images/map_fenlei_01.jpg"/></dt>
												<dd>游乐场</dd>
											</dl>
										</td>
										
									</tr>
									
									<tr>
										<td>
											<dl>
												<dt><img src="../images/map_fenlei_01.jpg"/></dt>
												<dd>海洋馆</dd>
											</dl>
										</td>
										<td>
											<dl>
												<dt><img src="../images/map_fenlei_01.jpg"/></dt>
												<dd>古塔寺庙</dd>
											</dl>
										</td>
										<td>
											<dl>
												<dt><img src="../images/map_fenlei_01.jpg"/></dt>
												<dd>纪念馆</dd>
											</dl>
										</td>
										
									</tr>
									
									
								</table>
								<div class="zhiwu">
									植物园
								</div>
							</div>
						</figure>
						<figure class="swiper-slide">
							<div class="map_2">
								<div class="map_tu">
									<img src="../images/map_yiheyuan.jpg"/>
								</div>
								<!-- 海淀区 -->
							    <div class="region">
							    	<div class="_top">海淀区最受欢迎</div>
							    	<div class="_bottom">
							    		 <!-- Swiper -->
									    <div class="swiper-container">
									        <div class="swiper-wrapper">
									            <div class="swiper-slide">
									            	<dl>
										            	<dt><img src="../images/map_yiheyuan.jpg"/></dt>
										            	<dd>
										            		<p>颐和园</p>
										            		<p>16.9公里</p>
										            	</dd>
										            </dl>
									            </div>
									            <div class="swiper-slide">
									            	<dl>
										            	<dt><img src="../images/map_yiheyuan.jpg"/></dt>
										            	<dd>
										            		<p>颐和园</p>
										            		<p>16.9公里</p>
										            	</dd>
										            </dl>
									            </div>
									            <div class="swiper-slide">
									            	<dl>
										            	<dt><img src="../images/map_yiheyuan.jpg"/></dt>
										            	<dd>
										            		<p>颐和园</p>
										            		<p>16.9公里</p>
										            	</dd>
										            </dl>
									            </div>
									        </div>
									    </div>
							
							    	</div>
							    </div>
							</div>
							
						</figure>
						<figure class="swiper-slide"></figure>
						<figure class="swiper-slide"></figure>
						
					</figrue>
				</section>
			</section>
		</div>
	    
		<!-- 底部导航 -->
	    <div class="nav_bottom">
	    	<dl class="index">
	    		<dt><img src="../images/index_nav_01.jpg"/></dt>
	    		<dd>发现</dd>
	    	</dl>
	    	<dl class="map">
	    		<dt><img src="../images/index_nav_02_cheak.jpg"/></dt>
	    		<dd>地图</dd>
	    	</dl>
	    	<dl class="fresh">
	    		<dt><img src="../images/index_nav_03.jpg"/></dt>
	    		<dd>新鲜</dd>
	    	</dl>
	    	<dl  class="mine">
	    		<dt><img src="../images/index_nav_04.jpg"/></dt>
	    		<dd>我的</dd>
	    	</dl>
	    </div>
	    <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
	    <script src="../assets/swiper/js/swiper.min.js"></script>
	    <script src="../js/map.js"></script>
	</body>
</html>
